<!--
 * @author: Spring
 * @create: 2021-06-24 17:14 PM
 * @license: MIT
 * @lastAuthor: Spring
 * @lastEditTime: 2021-07-01 15:47 PM
 * @desc: 
-->
<template>
  <div class="container">
    <div class="other_comment">
      <div class="left">
        <img :src="item.icon" alt="" />
      </div>
      <div class="right">
        <div class="title">
          <div class="name">{{ item.nick_name }}</div>
          <div class="tag"></div>
        </div>
        <div class="content" v-html="item.comment_info.content"></div>
        <div
          class="img"
          v-if="item.comment_info.imgs && Array.isArray(item.comment_info.imgs) &&item.comment_info.imgs.length>0"
        >
          <img
            v-for="(item, index) in item.comment_info.imgs"
            :key="index"
            :src="$image(item)"
            alt=""
          />
        </div>
        <div class="timebox">
          <div class="time">1小时</div>
          <div class="right">
            <div class="good">
              <svg
                data-v-aaa0ba66=""
                aria-hidden="true"
                width="16"
                height="16"
                viewBox="0 0 20 20"
                class="icon like-icon"
              >
                <g data-v-aaa0ba66="" fill="none" fill-rule="evenodd">
                  <path data-v-aaa0ba66="" d="M0 0h20v20H0z"></path>
                  <path
                    data-v-aaa0ba66=""
                    stroke="#8A93A0"
                    stroke-linejoin="round"
                    d="M4.58 8.25V17h-1.4C2.53 17 2 16.382 2 15.624V9.735c0-.79.552-1.485 1.18-1.485h1.4zM11.322 2c1.011.019 1.614.833 1.823 1.235.382.735.392 1.946.13 2.724-.236.704-.785 1.629-.785 1.629h4.11c.434 0 .838.206 1.107.563.273.365.363.84.24 1.272l-1.86 6.513A1.425 1.425 0 0 1 14.724 17H6.645V7.898C8.502 7.51 9.643 4.59 9.852 3.249A1.47 1.47 0 0 1 11.322 2z"
                  ></path>
                </g>
              </svg>
            </div>
            <div class="reply" @click="show.reply = !show.reply">
              <svg
                data-v-aaa0ba66=""
                aria-hidden="true"
                width="16"
                height="16"
                viewBox="0 0 20 20"
                class="icon comment-icon"
              >
                <g data-v-aaa0ba66="" fill="none" fill-rule="evenodd">
                  <path data-v-aaa0ba66="" d="M0 0h20v20H0z"></path>
                  <path
                    data-v-aaa0ba66=""
                    stroke="#8A93A0"
                    stroke-linejoin="round"
                    d="M10 17c-4.142 0-7.5-2.91-7.5-6.5S5.858 4 10 4c4.142 0 7.5 2.91 7.5 6.5 0 1.416-.522 2.726-1.41 3.794-.129.156.41 3.206.41 3.206l-3.265-1.134c-.998.369-2.077.634-3.235.634z"
                  ></path>
                </g></svg
              >回复
            </div>
          </div>
        </div>

        <div class="comment" v-if="show.reply">
          <div class="profile">
            <img :src="$store.state.info.icon" alt="" />
          </div>
          <div class="inputbox">
            <div
              class="edit_box"
              :style="{
                border: focus
                  ? 'border: 1px solid #027fff'
                  : '1px solid hsla(0, 0%, 59.2%, 0.2)',
              }"
            >
              <div
                class="edit"
                contenteditable="true"
                placeholder="请输入评论..."
                @focus="
                  focus = true;
                  focusFunc;
                "
                @blur="focus = false"
                @input="content($event)"
                ref="edit"
              ></div>
              <div class="img_link">
                <div
                  class="chooseImg"
                  v-for="(item, index) in imgArr"
                  :key="item"
                >
                  <img :src="$image(item)" alt="" />
                  <span class="el-icon-error" @click="removeImg(index)"></span>
                </div>
              </div>
            </div>
            <div class="handle">
              <div class="left">
                <div class="face" @click.stop="showFace($event)">
                  <img src="/img/svg/face.svg" alt="" />表情
                  <face
                    style="zindex: 9999"
                    class="facezj"
                    @face="face"
                    :show="show.face"
                  />
                </div>

                <el-upload
                  action="http://api_devss.wanxikeji.cn/api/savePic"
                  :show-file-list="false"
                  name="img"
                  accept="image/jpeg,image/gif,image/png"
                  :on-success="handleSuccess"
                  :limit="9"
                  multiple
                  class="upload"
                >
                  <div class="img">
                    <img src="/img/svg/img.svg" style="width:22px;height:22px;" alt="" />图片
                  </div>
                </el-upload>
              </div>
              <div class="submit" @click="submit">评论</div>
            </div>
          </div>
        </div>

        <childrencomment v-for="item in children" :key="item.comment_id" :item="item" />
      </div>
    </div>
  </div>
</template>

<script>
import { commentlist, addcomment } from "/utils/api.js";
import face from "./Face.vue";
import childrencomment from "./ChildrenComment.vue";

export default {
  inject:['reload'],
  props: ["item"],
  data() {
    return {
      current:-1,
      children: [],
      show: {
        face: false,
        reply: false,
      },
      focus: false,
      imgArr: [],
      inputContent: "",
    };
  },
  components: {
    childrencomment,
    face,
  },
  mounted() {
    if (!this.item.icon) {
      this.item.icon =
        "https://sf1-ttcdn-tos.pstatp.com/img/mosaic-legacy/3795/3033762272~300x300.image";
    } else {
      this.item.icon =  this.$image(this.item.icon);
    }
    console.log(this.item);
    this.loadComment();
    this.analysis();
  },
  methods: {
    isJSON(str) {
      if (typeof str == "string") {
        try {
          var obj = JSON.parse(str);
          if (typeof obj == "object" && obj) {
            return true;
          } else {
            return false;
          }
        } catch (e) {
          return false;
        }
      }
      return false
    },
    analysis() {
      if (this.isJSON(this.item.comment_info)) {
        this.item.comment_info = JSON.parse(this.item.comment_info);
      }
    },
    loadComment() {
      let obj = {
        article_id: this.item.article_id,
        father_id: this.item.father_id,
      };
      commentlist(obj).then((res) => {
        let index = res.data.data.findIndex(
          (i) => i.comment_id == this.item.comment_id
        );
        console.log(index);
        console.log(res.data.data[index].child);
        res.data.data[index].child.forEach(item=>{
          if(this.$isJson(item.comment_info)){
            item.comment_info=JSON.parse(item.comment_info)
          }
        })
        this.children = res.data.data[index].child;
        console.log(this.children);
      });
    },
    submit() {
      if(this.$refs.edit.innerHTML==""&&this.inputContent==''){
        this.$message('你输入的内容为空','error')
        return
      }
      let obj = {
        token: this.$store.state.token,
        article_id: this.item.article_id,
        father_id:this.item.comment_id,
        comment_info: JSON.stringify({
          content: this.inputContent||this.$refs.edit.innerHTML,
          imgs: this.imgArr,
        }),
      };
      addcomment(obj).then((res) => {
        this.reload()
      });
    },
    //模拟双向绑定
    content(e) {
      this.inputContent = e.target.innerHTML;
    },
    face(item) {
      console.log("111");
      this.$refs.edit.innerHTML += `<img src=${item} style="width:22px;height:22px"/>`;
      this.$refs.edit.focus();
    },
    focusFunc() {
      this.$store.commit("judgeLogin");
    },
    showFace(e) {
      console.log(e.target);
      console.log(e.target.getAttribute("only"));
      if (e.target.getAttribute("only")) {
        return;
      }
      this.show.face = !this.show.face;
    },
    handleSuccess(response, file, fileList) {
      this.imgArr.push(response.data);
    },
    removeImg(index) {
      this.imgArr.splice(index);
    },
  },
};
</script>

<style scoped lang="scss">
.other_comment {
  margin-left: 64px;
  width: calc(100% - 64px);
  margin-top: 16px;
  margin-bottom: 10px;
  @include flex(flex-start, flex-start);
  .left {
    cursor: pointer;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    > img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
    }
  }
  > .right {
    flex: 1;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f1f1;
    .title {
      @include flex(flex-start);
      .name {
        @include font(13px, #333);
        margin-right: 4px;
      }
      .tag {
        @include font(13px, #8a9aa9);
      }
    }
    .content {
      margin-top: 6.6px;
      @include font(13px, #505050);
    }
    .img{
      width: 100%;
      img{
        width: 80px;
        height: 80px;
      }
    }
    .timebox {
      @include flex(space-between);
      @include font(13px, #8a9aa9);
      margin-top: 10px;
      > .right {
        width: 105px;
        @include flex(space-between);
        svg {
          width: 16px;
          height: 16px;
        }
        .good {
          cursor: pointer;
          @include flex();
        }
        .reply {
          cursor: pointer;
          @include flex();
          margin-left: 20px;
        }
      }
    }
    .comment {
      width: 100%;
      background-color: #fafbfc;
      box-sizing: border-box;
      padding: 12px 16px;
      @include flex(space-between, flex-start);
      .profile {
        width: 32px;
        height: 32px;
        margin-right: 12px;
        img {
          width: 32px;
          height: 32px;
          border-radius: 50%;
        }
      }
      .inputbox {
        flex: 1;
        .edit_box {
          flex: 1;
          min-height: 22px;
          box-sizing: border-box;
          padding: 0 10px;
          background-color: #fff;
          .edit {
            flex: 1;
            min-height: 22px;
            border: none;
            outline: none;
            overflow: auto;
            text-align: left;
            line-height: 24px;
          font-size: 12px;
          }
          .edit:empty::before {
            content: attr(placeholder);
            color: #a2a3a3;
            font-size: 12px;
          }
          /*不一样的地方*/
          .edit:focus {
            content: none;
          }
          .img_link {
            @include flex(flex-start, center);
            flex-wrap: wrap;
            .chooseImg {
              width: 80px;
              height: 80px;
              position: relative;
              margin-right: 8px;
              margin-bottom: 8px;
              span {
                position: absolute;
                top: 3px;
                right: 3px;
                cursor: pointer;
              }
              img {
                width: 80px;
                height: 80px;
                cursor: pointer;
              }
            }
            .addImg {
              width: 80px;
              height: 80px;
              border: 1px dashed #c5c5c5;
              cursor: pointer;
              @include font(50px, #d2d2d2);
              @include flex();
            }
          }
        }
        .handle {
          @include flex(space-between);
          margin-top: 10px;
          .left {
            @include flex(flex-start);
            div {
              cursor: pointer;
              @include flex(center, center);
              @include font(13px, #027fff);
            }
            .face {
              position: relative;
              margin-right: 10px;
              white-space: nowrap;
              .facezj {
                position: absolute;
                top: 32px;
                left: 0;
                width: 304px;
                height: 234px;
                box-sizing: border-box;
                padding: 12px;
                @include flex(flex-start, center, column);
              }
            }
            .img {
              white-space: nowrap;
              .upload {
                cursor: pointer;
                @include flex(center, center);
                @include font(13px, #027fff);
              }
            }
          }
          .submit {
            width: 61px;
            height: 31px;
            background-color: #027fff;
            color: #fff;
            border-radius: 2px;
            cursor: pointer;
            @include flex();
          }
        }
      }
    }
  }
}
</style>
